<template>
	<view class="page-content">
		<f-navbar title="详情" bgColor="linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%)" fontColor="#ffffff"
			leftIconColor="#ffffff"></f-navbar>
		<view class="header-bg"></view>
		<!-- <view class="content-box" :style="{top:`${systemInfo.navBarH}px`}" v-if="taskInfo"> -->
		<view class="content-box"  v-if="taskInfo">
			<view>
				<taskItem :showType="2" :item="taskInfo">
					<view slot="moreInfo">
						<view class="item-info-sm">车牌号码：{{taskInfo.receivingVehicleDTO.licensePlateNumber}}</view>
						<view class="item-info-sm">对接人：{{taskInfo.transactionOrderDTO.address.name}}</view>
						<view class="item-info-sm">对接人手机号：{{taskInfo.transactionOrderDTO.address.phone}}</view>
						<view class="item-info-sm" v-if="taskInfo.transactionOrderDTO.type==2">称重信息：</view>
					</view>
				</taskItem>
			</view>
			<view class="electric-info"
				v-if="taskInfo.transactionOrderDTO.electricVehicleRecyclingDtoList && taskInfo.transactionOrderDTO.electricVehicleRecyclingDtoList.length">
				<view class="flex align-center justify-between">
					<view class="title-box">电动车信息</view>
					<view class="price-box">服务费：{{taskInfo.transactionOrderDTO.serviceCharge}}</view>
				</view>
				<view class="box-info">
					<view class="electric-item flex align-center"
						v-for="(item,index) in taskInfo.transactionOrderDTO.electricVehicleRecyclingDtoList" :key="index">
						<image class="item-logo" :src="item.frontPhoto" mode="aspectFill"></image>
						<view class="item-info flex-sub">
							<view class="title">{{getDictionaryName(vehicleTypeOptions,item.vehicleType)}}</view>
							<view class="remark">
								<text>{{getDictionaryName(serviceLifeOptions,item.vehicleServiceLife)}}</text>
								<text class="margin-left-sm">{{item.batteriesNum}}块电池</text>
								<text class="margin-left-sm">{{getDictionaryName(batteryModelOptions,item.batteryModel)}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-box" v-if="taskInfo.taskCheckInDTO">
				<view class="title-box">现场照片</view>
				<view class="img-box" v-if="taskInfo.taskCheckInDTO.signInPhoto">
					<image class="img-item" :src="item" mode="aspectFill"
						v-for="(item,index) in taskInfo.taskCheckInDTO.signInPhoto.split(',')" :key="index"></image>
				</view>
			</view>
			<view class="info-box" v-if="taskInfo.taskRecorderDTO">
				<view class="title-box">附件信息</view>
				<view class="img-box" v-if="taskInfo.taskRecorderDTO.documents">
					<image class="img-item" :src="item" mode="aspectFill"
						v-for="(item,index) in taskInfo.taskRecorderDTO.documents.split(',')" :key="index"></image>
				</view>
			</view>
			<view class="info-box">
				<view class="title-box">行驶路线</view>
				<view class="route-box">
					<!-- <image class="route-img" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" mode="aspectFill"></image> -->
					<view class="route-time">运输时间：2h</view>
				</view>
			</view>
			<!-- <view class="info-box">
				<view class="title-box">消错记录</view>
				<view class="error-box">
					<view>内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述</view>
					<view class="img-box">
						<image class="img-item" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" mode="aspectFill"
							v-for="(item,index) in 3" :key="index"></image>
					</view>
					<view class="error-status">状态：已处理</view>
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	import {
		getTaskDetail,
		orderDetail
	} from "@/api/task.js"
	import taskItem from "@/components/pageLayout/listItem/task-item.vue"
	export default {
		components: {
			taskItem
		},
		data() {
			return {
				pageData: {},
				taskInfo: null,
				vehicleTypeOptions: [],
				serviceLifeOptions: [],
				batteryModelOptions: []
			};
		},
		onReady() {

		},
		onShow() {

		},
		onLoad(option) {
			this.pageData = option
			// this.getDictData();
			this.getData()

		},
		methods: {
			async getDictData() {
				// getDictionaryName(vehicleTypeOptions,item.vehicleType)
				this.vehicleTypeOptions = await this.getDictionaryData('vehicle_type');
				this.serviceLifeOptions = await this.getDictionaryData('service_life');
				this.batteryModelOptions = await this.getDictionaryData('battery_model');
			},
			getData() {
				orderDetail(this.pageData).then((res) => {
					this.taskInfo = {
						...res.data,
						...this.pageData
					};
				})
			},
		},

	};
</script>
<style lang="scss" scoped>
	.item-info-sm {
		margin-top: 20rpx;
		color: #666668;
		font-size: 30rpx;
	}

	.page-content {
		position: relative;

		.header-bg {
			width: 100%;
			top: 0;
			left: 0;
			z-index: 1;
			position: absolute;
			height: 400rpx;
			background: linear-gradient(101deg, #47B352 1%, #47B352 29%, #1F9970 100%);
		}

		.content-box {
			position: relative;
			z-index: 2;
			padding: 32rpx;

			.electric-info {
				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.price-box {
					font-size: 30rpx;
					color: #138E57;
				}

				.box-info {
					padding: 0 32rpx;
					margin-top: 24rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					.electric-item {
						padding: 32rpx 0;
						border-bottom: 1rpx solid #EFEFEF;

						&:last-child {
							border: none;
						}

						.item-logo {
							width: 125rpx;
							height: 125rpx;
							margin-right: 32rpx;
						}

						.item-info {
							.title {
								font-weight: bold;
								font-size: 34rpx;
								color: #000000;
							}

							.remark {
								font-size: 30rpx;
								color: #666668;
								margin-top: 20rpx;
							}
						}
					}
				}
			}

			.info-box {
				padding: 32rpx;
				margin-top: 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.title-box {
					font-size: 32rpx;
					font-weight: bold;
				}

				.img-box {
					margin-top: 20rpx;
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-gap: 16rpx;

					.img-item {
						width: 196rpx;
						height: 196rpx;
					}
				}

				.route-box {
					margin-top: 20rpx;

					.route-img {
						width: 100%;
						height: 354rpx;
					}

					.route-time {
						margin-top: 20rpx;
						font-size: 30rpx;
						color: #000000;
					}
				}

				.error-box {
					margin-top: 20rpx;
					font-size: 30rpx;
					color: #000000;

					.error-status {
						margin-top: 20rpx;
						padding: 14rpx 20rpx;
						background: rgba(19, 142, 87, 0.1);
						color: #666668;
					}
				}
			}
		}
	}
</style>